/**
 * Created by Administrator on 2017/9/23 22:33
 * 后台项目弹框插件
 *
 *  参数说明：
 *
     cls   修改class fa-trash-o=删除  fa-rotate-left=还原  fa-question=问号

     type  1=确定弹框, 2=审核弹框,3=下拉弹框,4=复选弹框

     btns = ['保存','撤销'] 修改按钮的内容 ，可以不传，默认为 确认和取消 按钮。

     main = [{},{}] 带key的为左右布局，不带key的占一行。 val 为输入框的类型, hint 为提示字符

     list = {down:[],date:[],check:[]} down:下拉列表, date: 时间类型 , check:[] 复选框内容

     callback(json,dom) 确认的回调，可接收两个参数，第一个参数为json 对象,第二个参数为 弹框最外层dom
 */


!function (w,$){
    /*默认配置*/
    var config={
        /*1=确定弹框, 2=审核弹框,3=下拉弹框,4=复选弹框 */
        type : [1, 2, 3, 4],
        /*按钮*/
        btns: ['确定', '取消'],
        /*content*/
        content: "",
        /*头部*/
        title: '',
        /*主体内容*/
        main: [],
        /*修改class名*/
        cls: '',
        /*列表默认数据*/
        list:{
            check:['首页banner','旌舞秒杀','发现好货','会买专辑','享品质','爱生活','寻me'],
            down:['APP客户端','WEB手机端', 'PC客户端', 'PC网页端', '微信公众号'],
            date:['1天','2天','3天']
        },
        showBtn:true,
        /*回调*/
        callback: function () {}
    };
    /* 弹框插件的入口函数 */
    var pop=function (options) {
        var option = $.extend({},config,options);
        pop.proto.init(option);
    };
    pop.proto=pop.prototype={
        /*初始化*/
        init:function (option) {
            this.option=option;
            this.verdict(option);
        },
        /* 可扩展追加不同类型的弹框 */

        /*判断类型*/
        verdict:function (option) {
            switch (option.type){
                case 1:
                    this.confirm(option);
                    break;
                case 2:
                    this.audit(option);
                    break;
                case 3:
                    this.popDown(option);
                    break;
                case 4:
                    this.checkbox(option);
                    break;
                case 5:
                    this.frame(option);
                    break;
                default:
                    this.confirm(option);
            }
        },
        /*确认类型弹框*/
        confirm:function (data) {
            var temp = '<div><button type="button" class="close">\
                    <i class="ace-icon fa fa-times"></i></button></div><div class="space"></div>';
            temp += '<div class="dia-cont clearfix"><div class="badge badge-warning">\
                    <i class="icon-box fa '+(data.cls || "fa-trash-o")+'"></i></div><div class="space"></div>\
                    <h4>'+data.content+'</h4></div><div class="space"></div>';
            this.open(temp);
        },
        /*审核类型弹框*/
        audit:function (data) {
            var temp=this.getTitle(data.title);
            temp += '<div class="layer-detail"><ul class="course-layer">';
            temp+=this.getRadio(data.radio);
            for(var i in data.main){
                temp+=this.showType(data.main[i]);
            }
            temp+='</ul></div>';
            this.open(temp);
        },
        /*下拉功能弹框*/
        popDown:function (data) {
            var temp = '',main = data.main;
            temp+=this.getTitle(data.title);
            temp+='<div class="layer-detail"><ul class="course-layer">';
            for(var i in main){
                temp+=this.showType(data.main[i]);
            }
            temp+='</ul></div>';
            this.open(temp);
        },
        /*复选框弹框*/
        checkbox:function (data) {
            var temp = '';
            temp+=this.getTitle(data.title);
            temp+='<div class="layer-detail"><ul class="no-margin"><li class="clearfix">';
            temp+=this.getCheckbox(data.main);
            temp+='</li></ul></div>';
            this.open(temp);
        },
        /*iframe 类型弹框*/
        frame:function (data) {

        },

        /*-----分割线以下为辅助功能函数-----*/

        /*操作成功的回调*/
        success:function () {

        },
        /*操作失败的回调*/
        error:function () {

        },
        /*显示不同类型*/
        showType:function (item) {
            var str = '<li class="clearfix">';
            switch (item.val){
                case 'down':case 'date':
                    str+='<span class="pull-left layer-detail-span color-gray6 font-size16">'+item.key+'</span>';
                    str+='<div class="pull-left layer-detail-select dropdown">';
                    str+='<input type="text" placeholder="'+item.hint+'" readonly class="color-grays"\
                      data-toggle="dropdown" style="cursor: pointer;"><i class="fa fa-caret-down"></i>';
                    str+=this.getDown(item);
                    break;
                case 'input': case 'time':
                    str+=this.getInput(item);
                    break;
                case 'textarea':
                    str+=this.getTextArea(item);
                    break;
                default:
                    break;
            }
            return str+='</li>';
        },
        /*显示弹框*/
        open:function (html) {
            var b = $('body'),
                popup = '<div class="dialog text-center" id="popup"><div class="dia" style="min-width: 420px">';
            if (b.find('#popup').length > 0) {this.close()}
            popup += html;
            if(this.option.showBtn){
                popup+=this.getBtn(this.option.btns);
            }
            popup += '</div></div>';
            b.append(popup);
            this.baseEvent(b.find('#popup'));
            delete this.option;
        },
        /*关闭弹框*/
        close:function () {
            $('#popup').remove();
        },
        /*获取单选框*/
        getRadio:function (data) {
            var str = '';
            if(data){
                str+='<li class="clearfix">\
                <span class="pull-left layer-detail-span color-gray6 font-size16">'+data.key+' :</span>\
                <div class="pull-left course-layer-list"><label class="pull-left">\
                <input type="radio" checked name="agree">'+(data.val[0]||'同意')+'</label><label class="pull-left">\
                <input type="radio" name="agree">'+(data.val[1]||'拒绝')+'</label></div></li>';
            }
            return str;
        },
        /*获取title*/
        getTitle:function (title) {
            var str = '';
            if(title){
                str+='<div class="dia-title"><h4 class="no-margin">'+title+'</h4>\
                    <button type="button" class="close close-btn"><i class="ace-icon fa fa-times"></i>\
                    </button></div><div class="space"></div>';
            }
            return str;
        },
        /*获取底部按钮*/
        getBtn:function () {
            var btn = this.option.btns||[],len=btn.length,
                str='<div class="dia-foot clearfix btn-foot"><div class="row">';
            if(len==1){
                str+='<div class="col-sm-12"><button class="btn btn-outline">'+btn[0]+'</button></div>';
            }else{
                str +='<div class="col-sm-6"><button class="btn back-blue sure">' + btn[0] + '</button>\
                </div><div class="col-sm-6"><button class="btn btn-outline">' + btn[1] + '</button>\
                </div>'
            }
            str+='</div></div>';
            return str;
        },
        /*获取下拉框内容*/
        getDown:function (item) {
            var str = '',i,list=this.option.list;
            str+='<div class="dropdown-menu" role="menu">';
            if(item.val=='down'){
                var data = list.down,len=data.length;
                for(i=0;i<len;i++){
                    str+='<div class="J-check"><label><input type="checkbox"><span>'+data[i]+'</span></label></div>'
                }
                this.bindDown('.J-check');
            }else{
                var data = list.date||[],len = data.length;
                for(i=0;i<len;i++){
                    str+='<p><label><span>'+data[i]+'</span></label></p>';
                }
                this.bindDown();
            }
            return str+='</div>';
        },
        /*获取input框*/
        getInput:function (item) {
            var str = '';
            if(item.key){
                str+='<span class="pull-left layer-detail-span color-gray6 font-size16">'+item.key+'</span>';
                str+='<div class="pull-left layer-detail-select">\
                    <input type="text" placeholder="'+item.hint+'" class="color-grays"></div>';
            }else{
                str+='<div class="pull-left layer-detail-select" style="width:100%">\
                    <input type="text" placeholder="'+item.hint+'" class="color-grays"></div>';
            }
            return str;
        },
        /*获取多文本输入框*/
        getTextArea:function (item) {
            var str='';
            if(item.key){
                str+='<span class="pull-left layer-detail-span color-gray6 font-size16">'+item.key+'</span>';
                str+='<div class="pull-left" style="width:70%;"><div class=" layer-detail-select" style="width: 100%;">\
                <textarea name="" placeholder="'+(item.hint||'请输入内容')+'" class="color-grays" maxlength="150"></textarea></div>'
                str+='<p class="computations font-size14"><em class="color-blue">0</em>/150</p>';
            }else{
                str+='<div class="pull-left" style="width: 100%;">\
                <div class=" layer-detail-select" style="width: 100%;">\
                <textarea name="" placeholder="'+(item.hint||'请输入内容')+'" maxlength="150"></textarea>\
                </div><p class="computations font-size14"><em class="color-blue">0</em>/150</p></div>';
            }
            this.bindKeyup('textarea');
            return str;
        },
        /*获取复选框*/
        getCheckbox:function (item) {
            var i,check=this.option.list.check||[],len=check.length,str='';
                str += '<span class="pull-left layer-detail-span color-gray6 font-size16">'+item.key+'</span>';
                str+='<div class="pull-left layer-detail-select site-select">';
            for(i=0;i<len;i++){
                str+='<p><label><input type="checkbox"><span>'+check[i]+'</span></label></p>'
            }
            return str+='</div>';
        },
        /*绑定基础事件*/
        baseEvent:function (dom) {
            var s=this;
            s.callback=s.option.callback;
            dom.on('click','.close',this.close);
            dom.on('click','.sure',function () {
                s.callback(s.eachData(dom),dom);
            });
            dom.on('click','.btn-outline',this.close);
        },
        /*绑定键盘事件*/
        bindKeyup:function (area) {
            $('body').on('keyup','#popup '+area,function (e) {
                var self = $(this),em=self.parents('.pull-left').find('.color-blue');
                    em.text(parseInt(self.val().length));
                if(e.keyCode==13){
                    $('#popup .dia-foot .sure').trigger('click');
                }
            });
        },
        /*绑定下拉事件*/
        bindDown:function (bind) {
            var b=$('body');
            /*单选按钮事件*/
            if(bind){
                b.on('click',"#popup "+bind+" input[type='checkbox']",function () {
                    var self = $(this),num=0,
                        put=self.parents('.pull-left').find("input[type='text']"),
                        list=self.parents('.dropdown-menu').find('.J-check'),txt='';
                    list.each(function (a,b) {
                        if($(b).find('input').prop('checked')){
                            num++;
                            if(num>1){txt+=' , ';}
                            txt+=$(b).find('span').text();
                        }
                    });
                    put.val(txt);
                });
            }else{
                b.on('click','#popup .dropdown-menu p',function () {
                    var p = $(this),txt=p.find('span').text();
                    p.parents('.pull-left').find("input[type='text']").val(txt);
                });
            }
        },
        /*遍历数据*/
        eachData:function (dom) {
            var json={},li=dom.find('li');
            li.each(function (ind,dom) {
                var s=$(dom),put=s.find('input'),txt=s.find('textarea');
                if(put.length || txt.length){
                    json['key'+ind]=put.prop('checked')==true || put.val() || txt.val() ||'';
                }
            });
            return json;
        }
    };
    $.popup=pop;
}(window || this,window.jQuery||window.$);